import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input } from "antd";
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { loginAction } from "@/store/modules/user";
import "./index.scss";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { AnyAction, AsyncThunkAction } from "@reduxjs/toolkit";
import { RootState } from "@/store";
import { genMenuItems, genMenuOpenKeys, getPermissionMenuItems } from "@/utils";
import { asyncRoutes } from "@/router";

const PageLogin = () => {
  const loading = useSelector((state: RootState) => state.user.loading);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  // const onFinish = async (values: any) => {
  //   const { data } = await login({
  //     adminname: values.username,
  //     password: values.password,
  //   });
  //   // 派发动作，将数据存储到仓库中
  //   dispatch(loginSuccess(data));
  //   // 跳转到首页
  //   navigate("/dashboard/analysis");
  //   // console.log("res", res);
  // };

  const onFinish = (values: any) => {
    dispatch<any>(
      loginAction({
        adminname: values.username,
        password: values.password,
      })
    ).then(() => {
      // let permissions = ["/dashboard/analysis"];
      //
      // // 处理 将 permissions => 携带有父级路由的数组数据
      // // ["/dashboard/analysis"] => ["/dashboard", "/dashboard/analysis"]
      // let allPermissions: string[] = [];
      // permissions.forEach((key) => {
      //   allPermissions.push(...genMenuOpenKeys(key));
      // });
      //
      // console.log("allPermissions", allPermissions);
      //
      // let result = getPermissionMenuItems(
      //   genMenuItems(asyncRoutes),
      //   allPermissions
      // );
      //
      // console.log("result", result);

      // console.log("1111");
      // 取出 url 地址中 redirect 的值
      const redirect = searchParams.get("redirect") || "/dashboard/analysis";
      // 跳转到首页
      navigate(redirect, { replace: true });
    });

    console.log("2222");
  };

  return (
    <div className="page-login">
      <div className="container">
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ username: "admin", password: "123456" }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "Please input your Username!" }]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "Please input your Password!" }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={loading}
              className="login-form-button"
            >
              Log in
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default PageLogin;
